/*
 * @Author: softLink.gyj 
 * @Date: 2018-01-03 16:17:45 
 * @Last Modified by: YaoChangTuiQueDuan
 * @Last Modified time: 2018-02-06 22:24:40
 */


/**
 * Slide  基于BScroll封装的原生滚动组件
 * 
 * 默认数据  可传入修改
 * initData = {
        imgArray: [{
                src: 'http://oss.softlinkonline.cn/appimages/web-banner1.jpg',
                link: 'http://www.softlinkonline.cn/app.php/details.html?id=21',
            },
            {
                src: 'http://oss.softlinkonline.cn/appimages/web-banner2.jpg',
                link: 'http://www.softlinkonline.cn/app.php/details.html?id=7',
            },
            {
                src: 'http://oss.softlinkonline.cn/appimages/web-banner3.jpg',
                link: 'http://www.softlinkonline.cn/app.php/details.html?id=19',
            },
            {
                src: 'http://oss.softlinkonline.cn/appimages/web-banner4.jpg',
                link: 'http://www.softlinkonline.cn/app.php/details.html?id=9',
            },
        ],
        time: 4000,
        autoPlay: true,
        loop: true,
        click: true,
    }
 */
class Slide {
    constructor(initData) {
        this.initData = {
            imgArray: [{
                    src: 'http://oss.softlinkonline.cn/appimages/web-banner1.jpg',
                    link: 'http://www.softlinkonline.cn/app.php/details.html?id=21',
                },
                {
                    src: 'http://oss.softlinkonline.cn/appimages/web-banner2.jpg',
                    link: 'http://www.softlinkonline.cn/app.php/details.html?id=7',
                },
                {
                    src: 'http://oss.softlinkonline.cn/appimages/web-banner3.jpg',
                    link: 'http://www.softlinkonline.cn/app.php/details.html?id=19',
                },
                {
                    src: 'http://oss.softlinkonline.cn/appimages/web-banner4.jpg',
                    link: 'http://www.softlinkonline.cn/app.php/details.html?id=9',
                },
            ],
            time: 4000,
            autoPlay: true,
            loop: true,
            click: true,
        }
        this.slide = document.getElementById('slide');
        this.slideGroup = this.slide.getElementsByClassName('slide-group')[0];
        this.dots = document.getElementsByClassName('dots')[0];
        this.initData = Object.assign(this.initData, initData);
        this.currentPageIndex = 0;
    }

    init() {
        this.renderSlideItem();
        this.renderDots();
        this.setSlideGroundWidth();
        this.initSilde();
        if (this.initData.autoPlay) {
            clearTimeout(this.timer);
            this.autoPlay();
        }

        window.addEventListener('resize', () => {
            this.setSlideGroundWidth(true);
            this.BScroll.refresh();
        })
    }

    // 渲染slide-item
    renderSlideItem() {
        this.initData.imgArray.forEach((e, i) => {
            let div = document.createElement('div');
            let content = '';
            div.className = 'slide-item';
            if (e.link) {
                content =
                    `
                    <a href="${e.link}">
                        <img src="${e.src}" alt="">
                    </a>
                `
            } else {
                content =
                    `
                    <img src="${e.src}" alt="">
                `
            }
            div.innerHTML = content;
            this.slideGroup.appendChild(div);
        })
        this.slideItem = this.slide.getElementsByClassName('slide-item');
        this.dotsArray = new Array(this.slideItem.length);
    }

    // 渲染dots
    renderDots() {
        for (let i = 0; i < this.dotsArray.length; i++) {
            let span = document.createElement('span');
            span.className = 'dot';
            this.dots.appendChild(span);
        }
        this.changeDot();
    }

    // 切换dot
    changeDot() {
        let dots = this.dots.children;
        for (let i = 0; i < dots.length; i++) {
            dots[i].classList.remove('active');
        }
        dots[this.currentPageIndex].classList.add('active');
    }

    // 设置slideGround宽度
    setSlideGroundWidth(isRsize) {
        let width = 0;
        let slideWidth = this.slide.clientWidth;
        for (let i = 0; i < this.slideItem.length; i++) {
            width += slideWidth;
            this.slideItem[i].style.width = slideWidth + 'px';
        }
        if (this.initData.loop && !isRsize) {
            width += 2 * slideWidth;
        }
        this.slideGroup.style.width = width + 'px';
    }

    // 初始化slide
    initSilde() {
        this.BScroll = new BScroll(this.slide, {
            scrollX: true,
            scrollY: false,
            momentum: false,
            preventDefaultException:{
                tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|IMG)$/
            },
            snap: {
                loop: this.initData.loop,
                threshold: 0.3,
                speed: 400,
            },
            bounce: false,
            click: true
        })
        this.BScroll.on('scrollEnd', () => {
            let pageIndex = this.BScroll.getCurrentPage().pageX;
            this.currentPageIndex = pageIndex;
            if (this.initData.autoPlay) {
                this.changeDot();
            }
            this.autoPlay();
        })
    }

    // 自动播放
    autoPlay() {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            this.BScroll.next();
        }, this.initData.time);
    }

}